<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazy-flow</title>
    <link rel="Shortcut Icon" href="/bootstrap/img/glyphicons-halflings.png" />
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="js/jsplumb.min.js"></script>
    <script type="text/javascript" src="js/drawer.js"></script>
    <script type="text/javascript">
        drawer.sourceModel = eval({"lineList": [], "nodeList": [], "id": "", "name": ""});
    </script>
</head>
<body onload="drawer.ready();">
<div id="toolsContainer" class="panel panel-default black_bg" style="position: absolute;padding: 0;width: 1100px;">
    <div class="panel-body">
        <div class="input-group">
            <span class="input-group-addon"><div class="label_w">选择模型</div></span>
            <select class="form-control" id="modelLists" 
                <option value="" selected>创建新流程</option>
            </select>
        </div>
        <div class="input-group">
            <span class="input-group-addon"><div class="label_w">点击新增</div></span>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="state-item-begin" style="position: static" onclick="drawer.node.addBeginNode()">起点</div>
                    </div>
                    <div class="col-sm-3">
                        <div class="state-item" style="position: static" onclick="drawer.node.addTaskNode()">普通节点</div>
                    </div>
                    <div class="col-sm-3">
                        <div class="state-item-gateway" style="position: static" onclick="drawer.node.addGatewayNode()">+</div>
                    </div>
                    <div class="col-sm-3">
                        <div class="state-item-end" style="position: static" onclick="drawer.node.addEndNode()">终点</div>
                    </div>
                </div>
            </div>

            <!--<button class="btn btn-primary" onclick="drawer.node.addBeginNode()" >新增起点</button>-->

            <!--<button class="btn"  onclick="drawer.node.addTaskNode()" style="border: solid 1px rgba(0, 0, 0, 0.05)">-->
                <!--新增普通节点-->
            <!--</button>-->
            <!--<button class="btn" onclick="drawer.node.addGatewayNode()"  style="border: solid 1px rgba(0, 0, 0, 0.05)">新增网关</button>-->
            <!--<button class="btn btn-danger" onclick="drawer.node.addEndNode()"  style="border: solid 1px darkred">新增终点</button>-->
        </div>
    </div>
</div>
<table style="width: 100%;" border="0" class="black_bg">
    <tr>
        <td style="width:1100px;">

        </td>
        <td></td>
    </tr>
    <tr>
        <td valign="top">
            <div id="diagramContainer"></div>
        </td>
        <td valign="top">
            <!-- -->
            <div class="panel panel-default hide" id="import_form">
                <div class="panel-heading">✏import json</div>
                <div class="input-group">
                    <span class="input-group-addon">json</span>
                    <textarea class="form-control multiline-text" id="model_json" rows="10"
                              placeholder="A json of model. " ></textarea>
                </div>
                <button class="btn btn-primary" onclick="drawer.import()">导入</button>
            </div>
            <!-- -->
            <div class="panel panel-default hide" id="line_form">
                <div class="panel-heading">✏line_form</div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">sourceId</div></span>
                    <input class="form-control" id="line_sourceId" placeholder="sourceId" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">targetId</div></span>
                    <input class="form-control" id="line_targetId" placeholder="targetId" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">id</div></span>
                    <input class="form-control" id="line_id" placeholder="id" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">线上文字</div></span>
                    <input class="form-control" id="line_label" placeholder="label" />
                </div>
                <button class="btn btn-primary" onclick="drawer.line.saveLineForm()">修改line</button>
                <button class="btn btn-danger" onclick="drawer.line.delLine($('#line_sourceId').val(), $('#line_targetId').val())">删除line</button>
            </div>
            <!-- -->
            <div class="panel panel-default hide" id="node_form">
                <div class="panel-heading">✏node_form</div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">id</div></span>
                    <input class="form-control" id="node_id" placeholder="id" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">节点类型</div></span>
                    <input class="form-control" id="node_type" placeholder="type" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">top</div></span>
                    <input class="form-control" id="node_top" placeholder="top" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">left</div></span>
                    <input class="form-control" id="node_left" placeholder="left" readonly="true"/>
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><div class="label_w">节点文字</div></span>
                    <input class="form-control" id="node_name" placeholder="name" />
                </div>
                <button class="btn btn-primary" onclick="drawer.node.saveNodeForm()">修改node</button>
                <button class="btn btn-danger" onclick="drawer.node.delNode()">删除node</button>
            </div>

        </td>
    </tr>
</table>
<div class="panel panel-default black_bg">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <div class="input-group">
            <span class="input-group-addon">
                <div class="label_w">模型名称</div>
            </span>
            <input class="form-control" id="model_name" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">
                <div class="label_w">操作</div>
            </span>&nbsp;
            <button class="btn" onclick="drawer.download()">下载json</button>
        </div>
        <div class="input-group">
            <span class="input-group-addon">
                <div class="label_w"> JSON</div>
            </span>
            <pre style="width: 100%;height: 300px;" id="viewJson"></pre>
        </div>

    </div>
</div>

</body>
<style>
    .black_bg {
        background-color: rgb(40,44,52);
    }
    #diagramContainer {
        border: dashed 1px whitesmoke;
        background-color: rgb(40,44,52);
        /*background:*/
                /*radial-gradient(*/
                        /*ellipse at top left,*/
                        /*rgba(255, 255, 255, 1) 40%,*/
                        /*rgba(229, 229, 229, .9) 100%*/
                /*);*/
        height: 750px;
        width: 1100;
        overflow: x;
        border-radius: 10px;
    }
    .label_w {
        width: 80px;
    }
    .state-item-begin {
        width: 80px;
        height: 40px;
        color: #606266;
        background: #f6f6f6;
        border: 2px solid dodgerblue;
        text-align: center;
        line-height: 40px;
        font-family: sans-serif;
        border-radius: 20px;
        margin-right: 60px;
        position: absolute;
        cursor: pointer;
    }
    .state-item-end {
        width: 80px;
        height: 40px;
        color: #606266;
        background: #f6f6f6;
        border: 2px solid darkred;
        text-align: center;
        line-height: 40px;
        font-family: sans-serif;
        border-radius: 20px;
        margin-right: 60px;
        position: absolute;
        cursor: pointer;
    }
    .state-item-gateway {
        width: 40px;
        height: 40px;
        color: #606266;
        background: #f6f6f6;
        border: 2px solid darkred;
        text-align: center;
        line-height: 40px;
        font-family: sans-serif;
        border-radius: 10px;
        margin-right: 60px;
        position: absolute;
        transform: rotate(45deg);
        cursor: pointer;
    }
    .state-item {
        width: 120px;
        height: 40px;
        color: #606266;
        background: #f6f6f6;
        border: 2px solid forestgreen;
        text-align: center;
        line-height: 40px;
        font-family: sans-serif;
        border-radius: 0px;
        margin-right: 60px;
        position: absolute;
        cursor: pointer;
    }
    .line-wrap {
        display: flex;
        margin-bottom: 40px;
    }
    .validTip {
        line-height: 30px;
    }
</style>
</html>